<template>
  <div
    class="w-366px pos-absolute bg-#fff b-rd-4px shadow-[0_2px_4px_rgba(0,0,0,0.1)] z-1 cursor-default leading-normal"
    :style="{
      [direction === 'up' ? 'bottom' : 'top']: offset + 'px',
      ...(center
        ? {
            left: '50%',
            transform: 'translateX(-50%)',
          }
        : {}),
    }"
    @click.stop
  >
    <div h-85px bg-sky></div>
    <div flex gap10px p-10px>
      <div
        :style="{ backgroundImage: `url(${item.createAvatar})` }"
        class="w-48px h-48px b-rd-full m-t-5px pos-relative bg-cover bg-center cursor-pointer"
        @click.stop="router.push('/' + item.createBy)"
      ></div>
      <div>
        <span
          @click.stop="router.push('/' + item.createBy)"
          class="text-14px c-#FB7299 cursor-pointer"
          >{{ item.createByName }}</span
        >
        <span
          class="c-sky-500 text-20px m-l-5px v-mid"
          :class="`iconfont icon-icon-lv${item.createUserLevel}`"
        ></span>
        <div text-12px m-t-5px>
          <span>{{ item.createFollowNum }}</span>
          <span class="c-#9499a0 m-l-4px m-r-10px">关注</span>

          <span>{{ fansNum }}</span>
          <span class="c-#9499a0 m-l-4px">粉丝</span>
        </div>
        <div class="text-12px c-#9499a0" v-if="item.createUserSignature">
          {{ item.createUserSignature }}
        </div>
      </div>
    </div>
    <el-skeleton :loading="loading" animated>
      <template #template>
        <div>
          <div text-center m-y-10px flex gap20px justify-center>
            <el-skeleton-item
              variant="text"
              style="width: 100px; height: 30px"
            />
            <el-skeleton-item
              variant="text"
              style="width: 100px; height: 30px"
            />
          </div>
        </div>
      </template>
      <template #default>
        <div text-center m-y-10px>
          <el-button
            v-if="followStatus"
            type="info"
            style="width: 100px; height: 30px"
            @click="follow(2)"
          >
            取消关注
          </el-button>
          <el-button
            type="primary"
            style="width: 100px; height: 30px"
            @click="follow(1)"
            v-else
          >
            关注
          </el-button>
          <el-button style="width: 100px; height: 30px">发消息</el-button>
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  addUserFollow as addUserFollowApi,
  statusFollow as statusFollowApi,
} from "@/api/userFollow";
import type { UserFollowForm } from "@/api/userFollow/types";
import router from "@/router";

const emit = defineEmits(["update-data"]);

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  direction: {
    type: String,
    default: "up", // 或 down
  },
  offset: {
    type: Number,
    default: 48,
  },
  followStatusProp: {
    type: Boolean,
    default: undefined, // 初始值为 undefined
  },
  center: {
    type: Boolean,
    default: false, // 是否居中
  },
});

// 是否加载完成
const loading = ref(true);

// 是否关注
const followStatus = ref<boolean | undefined>(undefined);

// 新增关注表单
const userFollowForm = <UserFollowForm>{
  followingId: props.item.createBy,
};

// 粉丝数
const fansNum = ref(props.item.createFansNum);

// 关注方法
const follow = async (operateType: number) => {
  userFollowForm.operateType = operateType;
  await addUserFollowApi(userFollowForm);
  followStatus.value = !followStatus.value;

  // 更新粉丝数
  if (operateType === 1) {
    fansNum.value++;
  } else {
    fansNum.value--;
  }

  // 触发父组件更新数据
  if (props.followStatusProp != undefined) {
    emit("update-data", followStatus.value, operateType);
  }
};

onMounted(async () => {
  //是否关注
  if (props.followStatusProp != undefined) {
    followStatus.value = props.followStatusProp;
  } else {
    const statusFollowRes = await statusFollowApi(props.item.createBy);
    followStatus.value = statusFollowRes.data;
  }

  loading.value = false; // 数据加载完成，显示组件
});
</script>

<style scoped></style>
